<template>
  <div class="main-index">

    <div class="download-app-box">
      <div class="download-inside">
        <img src="../../static/logo.jpg" alt="" class="down-logo">
        <div class="down-info-box">
          <!--<p class="title">Android App</p>-->
          <p class="title-text">{{$t('m.Getfullfunctions')}}</p>
          <div class="title-box">
            <p class="download-google">
              <a href="https://play.google.com/store/apps/details?id=com.tushengwanwu.bestproperty">
                <img src="../../static/google-play.png">
              </a>
            </p>
            <p class="download-btn"><a href="http://bestproperty.com.mm/download/consumer/bestproperty.apk">Download App</a></p>
          </div>
        </div>
      </div>

    </div>
    <div class="main-banner">
      <div class="lang-img" @click="changeLang">
        <img :src="langImage" alt="">
      </div>
      <p class="banner-txt">BestProperty</p>
      <img src="../assets/index-banner.jpg" alt="" :style="defaultImage">
    </div>
    <mt-cell :title="getRegions(regionId)" to="/regionList" is-link class="main-location">
      <img slot="icon" src="../../static/map_location.png" width="28" height="28">
    </mt-cell>
    <div class="main-tabbar">
      <router-link class="tab-item" to="/buy">
        <div class="tab-item-icon">
          <img slot="icon" src="../../static/my_advertisements.png">
        </div>
        <div class="tab-item-label">{{$t('m.Buy')}}</div>
      </router-link>
      <router-link class="tab-item" to="/newDevelopment">
        <div class="tab-item-icon">
          <img slot="icon" src="../../static/development_new.png">
        </div>
        <div class="tab-item-label">{{$t('m.New')}}</div>
      </router-link>
      <router-link class="tab-item" to="/rent">
        <div class="tab-item-icon">
          <img slot="icon" src="../../static/rent.png">
        </div>
        <div class="tab-item-label">{{$t('m.Rent')}}</div>
      </router-link>
    </div>
    <div class="main-tabbar">
      <router-link class="tab-item" to="/hostel">
        <div class="tab-item-icon">
          <img slot="icon" src="../../static/hostel_min.png">
        </div>
        <div class="tab-item-label">{{$t('m.Hostel')}}</div>
      </router-link>
    </div>

    <span class="myUniTest" id="myWidth2" style="opacity: 0">ကက</span>
    <span class="myUniTest" id="myWidth1" style="opacity: 0">က္က</span>
  </div>
</template>

<script>
  // 英语josn
  import regions from '@/json/region'
  // 缅甸语json
  import mm_regions from '@/mmJson/region'
  // 缅甸unicode
  import mmu_regions from '@/mmUnicodeJson/region'

  export default {
    name: 'Main',
    data () {
      return {
        regionId:2,
        langImage: './static/usLang.png',
        defaultImage: {
          backgroundImage: "url(" + require("../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%",
        },
      }
    },
    computed: {
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_regions
        } else {
          return regions
        }
      },
    },
    methods: {
      // 切换语言
      changeLang () {
        if(this.$i18n.locale == 'MM' || this.$i18n.locale == 'MMU'){
          this.$i18n.locale = 'US'
          this.lang = 'ျမန္မာ'
          this.$store.commit('updateLang', 'US')
          this.langImage = './static/myanmar.png'
          localStorage.setItem('lang','US')

        }else if(this.$i18n.locale == 'US'){
          // zawgyi
          this.$i18n.locale = 'MM'
          this.lang='English'
          this.$store.commit('updateLang', 'MM')
          this.langImage = './static/usLang.png'
          localStorage.setItem('lang','MM')

          // if(myUnicode.check()){
          //
          //   // uincode
          //   this.$i18n.locale = 'MMU'
          //   this.lang='English'
          //   this.$store.commit('updateLang', 'MMU')
          //   this.langImage = '../../static/usLang.png'
          //   localStorage.setItem('lang','MMU')
          // }else {
          //
          //   // zawgyi
          //   this.$i18n.locale = 'MM'
          //   this.lang='English'
          //   this.$store.commit('updateLang', 'MM')
          //   this.langImage = '../../static/usLang.png'
          //   localStorage.setItem('lang','MM')
          // }


        }
      },
      getRegions (id) {
        let str = ''
        this.regions.forEach((item) => {
          if (item.value == id) {
            str = item.text || ''
          }
        })
        return str
      },
    },
    mounted () {
      let regionIndexId = localStorage.getItem('regionIndexId')
      if (regionIndexId) {
        this.regionId = regionIndexId
        this.$store.commit('updateRegionId', regionIndexId)
      } else {
        this.$store.commit('updateRegionId', this.regionId)
      }


      if(!(this.$store.state.localLang == 'US')){
        this.$store.commit('updateLang', 'MM')
        localStorage.setItem('lang', 'MM')
        this.$i18n.locale = 'MM'
        // if(myUnicode.check()){
        //   // uincode
        //   this.$store.commit('updateLang', 'MMU')
        //   localStorage.setItem('lang', 'MMU')
        //   this.$i18n.locale = 'MMU'
        // }else {
        //   // zawgyi
        //   this.$store.commit('updateLang', 'MM')
        //   localStorage.setItem('lang', 'MM')
        //   this.$i18n.locale = 'MM'
        // }
      }

    },
  }
</script>

<style>
  .main-index a{
    text-decoration: none;

  }
  .main-index .mint-tabbar{
    position: relative;
    background: #fff;
  }
  .main-banner{
    position: relative;
    height: 180px;
  }
  .main-banner img{
    width:100%;
    height: 100%;
    display: block;
  }
  .main-banner .banner-txt{
    position: absolute;
    top:10%;
    left:0;
    right:0;
    text-align: center;
    color: rgb(255, 153, 0);
    font-size: 24px;
    font-weight: bold;
  }
  .main-tabbar{
    position: relative;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align:center;
  }
  .main-tabbar .tab-item{
    display: block;
    padding: 7px 0;
    width:33.33%;
    text-decoration: none;
    color: #000;
  }
  .main-tabbar .tab-item-icon{
    width: 42px;
    height: 42px;
    margin: 0 auto 5px;
  }
  .main-tabbar .tab-item-icon > * {
    display: block;
    width: 100%;
    height: 100%;
  }
  .main-tabbar .tab-item-label{
    color: inherit;
    font-size: 14px;
    line-height: 1;
  }
  .main-location{
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
  }
  .lang-img {
    position: absolute;
    cursor: pointer;
    /*padding: 5px;*/
    right: 15px;
    top: 15px;
    z-index: 99;
  }
  .download-app-box{
    padding:.12rem;
    background: rgb(242, 242, 242);
  }
  .download-inside{
    background:#fff;
    padding:.12rem;
    border-radius:8px;
    display:flex;
    align-items: center;
  }
  .down-logo{
    width:65px;
    height:68px;
  }
  .down-info-box{
    margin-left:.12rem;
  }
  .down-info-box .title{
    height:35px;
    line-height:35px;
    color: rgb(255, 153, 51);
    font-size: 16px;
  }
  .down-info-box .title-text{
    line-height: 30px;
  }
  .down-info-box .download-btn{
    height:35px;
    line-height:35px;
    text-align:center;
    background-color: rgb(255, 153, 51);
    color:#fff;
    max-width: 200px;
  }
  .down-info-box .download-btn a{
    color:#fff;
  }
  .down-info-box p{
    margin:0;
  }
  .title-box{
    display: flex;
    align-items: center;
  }
  .title-box p{
    flex: 1;
  }
  p.download-google {
    height: 38px;
    line-height: 38px;
    margin-right:0.12rem;
  }
  .download-google img{
    width: 100%;
    height: 100%;
  }
</style>
